import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  Image,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import PxToDp from '../../utils/PxToDp';

import { ChangeDiscount, fetchStoreInfo } from '../../actions/myAction';

class ChangeCarsDiscount extends Component {
  constructor(props) {
    super(props);
    const { discount } = this.props;
    this.state = {
      discount: discount.discount < 100 && discount.discount > 0,
      value: discount && discount.discount ? discount.discount : '',
      hasCar: discount && discount.stock ? discount.stock : null,
    };
  }

  _selectDiscount() {
    this.setState({ discount: !this.state.discount });
  }

  _selectHasCar() {
    let stock = 0;
    if (this.state.hasCar === 0) {
      stock = 1;
    } else {
      stock = 0;
    }
    this.setState({ hasCar: stock });
  }

  render() {
    const { dispatch, discount } = this.props;

    const carname = discount.carname ? discount.carname : null;

    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={styles.wrapper}>
          <View style={styles.titleWrapper}>
            <Text style={styles.title}>{carname}</Text>
          </View>
          <View style={[styles.row, styles.discountWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.selected]}
              onPress={() => this._selectDiscount()}
            >
              {this.state.discount ?
                <Image style={[styles.selectedIcon]} source={require('../../img/mSelectPress.png')} /> :
             null
            }
            </TouchableOpacity>
            <Text style={[styles.text]}>有优惠</Text>
            <TextInput
              defaultValue={`${this.state.value}`}
              style={styles.input}
              onChangeText={value => this.setState({ value })}
            />
            <Text style={styles.discount}>折</Text>
          </View>
          <View style={[styles.row, styles.discountWrapper]}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.selected]}
              onPress={() => this._selectHasCar()}
            >
              {this.state.hasCar ?
                <Image style={[styles.selectedIcon]} source={require('../../img/mSelectPress.png')} /> :
             null
            }
            </TouchableOpacity>
            <Text style={[styles.text]}>有现车</Text>
          </View>
          <View style={styles.bottomWrapper}>
            <View style={styles.submitWrapper}>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.button, styles.cancel]}
                onPress={() => this.props.onPress()}
              >
                <Text style={styles.cancelText}>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.button, styles.submit]}
                onPress={() => {
                  dispatch(ChangeDiscount({
                    discount: this.state.value,
                    stock: this.state.hasCar,
                    car_id: discount.car_id,
                  },
                    () => {
                      dispatch(fetchStoreInfo());
                    },
                    ));
                  this.props.onPress();
                }
                }
              >
                <Text style={styles.submitText}>保存</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  wrapper: {
    justifyContent: 'space-between',
    alignItems: 'center',
    width: PxToDp(320),
    height: PxToDp(220),
    paddingTop: PxToDp(20),
    backgroundColor: '#fff',
    borderStyle: 'solid',
    borderColor: '#f65252',
    borderTopWidth: PxToDp(3),
    borderRadius: PxToDp(2),
  },
  titleWrapper: {
    alignItems: 'center',
    width: PxToDp(280),
    marginBottom: 0,
  },
  title: {
    color: '#333',
    textAlign: 'center',
    fontSize: PxToDp(20),
  },
  bottomWrapper: {
    width: '100%',
  },
  submitWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 0,
    width: '100%',
    height: PxToDp(50),
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(160),
    height: PxToDp(50),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderTopWidth: PxToDp(1),
  },
  cancel: {
    marginLeft: 0,
    borderRightWidth: PxToDp(1),
  },
  cancelText: {
    color: '#999',
    fontSize: PxToDp(18),
  },
  submit: {
    marginRight: 0,
  },
  submitText: {
    color: '#f65252',
    fontSize: PxToDp(18),
    fontWeight: 'bold',
  },
  discountWrapper: {
    width: '100%',
    paddingLeft: PxToDp(30),
    justifyContent: 'flex-start',
  },
  selected: {
    position: 'relative',
    width: PxToDp(16),
    height: PxToDp(16),
    paddingLeft: 0,
    paddingTop: 0,
    borderStyle: 'solid',
    borderColor: '#d8d8d8',
    borderWidth: PxToDp(1),
  },
  text: {
    marginLeft: PxToDp(15),
    color: '#333',
    fontSize: PxToDp(16),
  },
  input: {
    width: PxToDp(66),
    height: Platform.OS === 'ios' ? PxToDp(20) : PxToDp(30),
    paddingBottom: PxToDp(0),
    marginLeft: PxToDp(21),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderWidth: PxToDp(1),
    borderRadius: PxToDp(3),
  },
  discount: {
    marginLeft: PxToDp(6),
    color: '#333',
    fontSize: PxToDp(14),
  },
  selectedIcon: {
    position: 'absolute',
    top: PxToDp(-3),
    left: PxToDp(-3),
    width: PxToDp(20),
    height: PxToDp(20),
  },
});

export default ChangeCarsDiscount;
